
import React from 'react';

export class Tabs extends React.Component {

    onTabClick = (ev) => {
        ev.preventDefault();
        const val = ev.target.getAttribute('data-val');
        this.props.onTabClick(val);
    }

    render() {
        const { list, loadTab, currentVal, className } = this.props;
        const btns = list.map(v => (
            <button type="button" key={v.val} className={v.val === currentVal ? 'current' : ''}
                onClick={this.onTabClick} data-val={v.val}>
                {v.val === loadTab && <i className="fa fa-spinner fa-spin" />}
                {v.text}</button>
        ));
        return (
            <div className={className} style={{ display: 'flex' }}>
                {btns}
            </div>
        );
    }
}
export default Tabs;